<template>
	<div class="search">
		<div class="header">
			<form>
				<input type="search" name="" id="" value="" placeholder="输入股票代码/名称/拼音"   v-model="change" @keyup="inputFunc"/>
			</form>
			
			<span @click="back" class="remove">取消</span>
		</div>
		<v-Content v-show="seachList.length==0">
		<div class="main" >
			<li>今日买点王</li>
			<div class="topBuy">
				<div class="out"  v-bind:class="[ {'right': (index %3 ==2)},{'noTop': (index<3)} ]"   v-for="(item,index) in topBuy" @click="sendParams(item.equityCode)" >
					<p style="font-size: 0.32rem;">{{item.equityName}}</p>
					<p style="color: #56627C; font-size: 0.2933rem;">{{item.equityCode}}</p>
					<p style="color: #fffc25; font-size: 0.48rem;"  class="overflow">{{item.number}} <span style="color: #56627C; font-size: 0.2933rem;">股</span></p>
					<span class="span" @click="sendParams(item.equityCode,item.equityName)">跟买</span>
				</div>
			</div>
			<li >最近购买</li>
			<div class="recents">
				<div class="out" :class="index %3 ==2? 'right':''"  v-for="(item,index) in recents" @click="sendParams(item.equityCode)" >
					<p style="font-size: 0.32rem;">{{item.equityName}}</p>
					<p style="color: #56627C; font-size: 0.2933rem;">{{item.equityCode}}</p>
					<p style="font-size: .48rem;" class="red" :class="color(item.risePrice)" >{{item.lastPrice }} <img :src="img(item.risePrice)"/></p>
         			<p class="red" :class="color(item.risePrice)">
         				<span>{{item.risePrice | toDoT}}</span>
         				<span style="margin-left: .2rem;">{{item.risePre | toDoT}}%</span>
         			</p>
				</div>
			</div>
			<li>别人都在买</li>
			<div class="recents">
				<div class="out" :class="index %3 ==2? 'right':''"  v-for="(item,index) in others" @click="sendParams(item.equityCode)"  >
					<p style="font-size: 0.32rem;">{{item.equityName}}</p>
					<p style="color: #56627C; font-size: 0.2933rem;">{{item.equityCode}}</p>
					<p style="font-size: .48rem;" class="red" :class="color(item.risePrice)" >{{item.lastPrice }} <img :src="img(item.risePrice)"/></p>
         			<p class="red" :class="color(item.risePrice)">
         				<span>{{item.risePrice | toDoT}}</span>
         				<span style="margin-left: .2rem;">{{item.risePre | toDoT}}%</span>
         			</p>
				</div>
			</div>
			
		</div>
		</v-Content>
		
		
		<!--股票查询列表-->
		<div class="seachList" v-for="(item, index) in seachList">
			<p @click="sendParams(item.stock_code)">
				<ul>
					<span>{{item.code_name}}</span>
					<span style="color: #56627C;margin-left: .2rem;">{{item.stock_code}}</span>
				</ul>
				
				<img :src="imgUrl(item.isChoose)" @click.stop="operate(item)" />
			</p>
		</div>
		
	</div>
</template>

<script>
	import home from '@/api/home/index'
	import Content from '@/components/ContentBottom'
	import deal from '@/api/deal/index'
	import { toast} from '@/util/index'
	import { Toast } from 'mint-ui';
	export default {
	data(){
		return{
			topBuy:[],
			recents:[],
			others:[],
			seachList:[],
			green:false,
			change:'',
			flag:"",
			flag2:true,
		}
	},
	filters:{
		toDoT(val){
			if(val<0){
				return val;
			}else{
				return "+"+val;
			}
			
		}
	},
	components:{
  		'v-Content':Content,
  	},
	methods:{
		imgUrl(value){
			if(value){
				return require("../../assets/transaction_minus.png");
			}else{
				return require("../../assets/transaction_add.png");
				
			}
		},
		operate(num){
			if(this.flag2){
				this.flag2=false;
				if(!num.isChoose){
				this.add(num);
					
				}else{
					this.del(num);
					
				}
			}
			
		},
		add(num){
			let senddata = {
				code:num.stock_code,
				userId:window.localStorage.getItem("token"),
				plat:"mlj"
			}
			deal.addMyChoose(senddata).then((res) => {
				if (res.data.code == 200) {
					this.inputFunc();
				}else {
					toast(res.data.message)
				}
			})
		},
		del(num){
			let senddata = {
				code:num.stock_code,
				userId:window.localStorage.getItem("token"),
				plat:"mlj"
			}
			deal.delChoose(senddata).then((res) => {
				if (res.data.code == 200) {
					this.inputFunc();
				}else {
					toast(res.data.message)
				}
			})
		},
		inputFunc(){
			
			let senddata = {
		    	searchVal:this.change,
		    	userId:window.localStorage.getItem("token"),
		    	plat:"mlj"
		    }
			home.searchStock(senddata).then((res) => {
				if (res.data.code == 200) {
					
					this.flag2=true;
					if(res.data.data.length==0){
						Toast({
						  message: '搜索无结果',
						  position: 'middle',
						  duration: 2000,
						  className:"toast"
						});
					}else{
						//console.log(this.change);
						this.seachList=res.data.data;
					}
					
				} else {
					toast(res.data.message)
				}
			})
		},
		back(){
			this.$router.go(-1);
		},
		color(value) {
	        if(value.substring(0,1)=='-'){
	        	//this.img = require('../assets/fall.png');
	        	return "green";
	        } 
	   },
	   img(value) {
	        if(value.substring(0,1)=='-'){
	        	return require('../../assets/fall.png');
	        }else{
	        	return require('../../assets/rise.png');
	        }
	   },
	   sendParams (num,name) {
	        this.$router.push({
	            path: '/tAdd1/', 
	            name: 'tAdd1',
	            query: { 
	                "stockNum": num
	            }
	           
	        })
	    }
			
	},
	computed:{
		
	},
	watch:{
		
	},
	mounted() {
		
	    let senddata = {
	    	plat:"mlj"
	    }
		home.equityRecommend(senddata).then((res) => {
			if (res.data.code == 200) {
				this.topBuy=res.data.data.topBuy;
				this.recents=res.data.data.recents;
				this.others=res.data.data.others;
			}else if(res.data.code==222){
	            this.$router.push({path:'/login'})
	        } else {
				toast(res.data.message)
			}
		})
  	},
  	beforeRouteEnter(to,from,next){
	    document.querySelector('title').innerText='谋略家'
	      next()
	  }
	
}
</script>

<style lang="less" scoped>
@import '../../less/config.less';
.toast{
	font-size: @fsize;
	padding:5px;
	color:red;
}
.header{
	height:1rem;
	padding: 0 @p30;
	display: flex;
	justify-content: center;
	align-items: center;
	input{
		width: 8.133rem;
		height: 0.7733rem;
		background: white;
		font-size: @f28;
		color:#ccc;
    	border-radius: 0.386rem;
    	text-indent: 1.066rem;
        background:#fff url(../../assets/icon_search.png)  no-repeat 20px center;
		background-size: @f26 @f26;
        overflow: hidden;
	}
	.remove{
		font-size:@f28 ;
		color:white;
		margin-left:.2rem;
		
		
	}
}
.main{
	
	li{padding: 0 @p30;
		color: white;
		list-style: none;
		height: .8rem;
		line-height: .8rem;
		font-size: @f28;
		background:#141723;
	}
	.topBuy{
		padding: 0 @p30;
		color:white;
		display: flex;
    	justify-content:flex-start;
    	align-items: center;
    	flex-wrap:wrap;
		.out{
			padding: @p30 @fsize;
    		width: 33.3%;
    		border-top: 1px solid #262934;
    		
    		
    		p{
    			height: 0.5333rem;
    			line-height: 0.5333rem;
    			border-right: 1px solid #262934;
    			
    		}
    		.span{
    			display: block;
    			width: 1.066rem;
    			height: @p30;
    			border-radius:0.2rem ;
    			background: #FF335B;
    			text-align: center;
    			line-height: @p30;
    			font-size: @fsize;
    			margin-top: 0.146rem;
    		}
    		.overflow{
    			  	white-space:nowrap;
				    overflow:hidden;
				    text-overflow:ellipsis;
				    width: 100%;
    		}
    		
    	}
    	.noTop{
    		border-top: none;
    	}
    	.right{
    		p{
    			border-right: none;
    		}
    		
    	}
	}
	.recents{
		padding: 0 @p30;
		color:white;
		display: flex;
    	justify-content: flex-start;
    	align-items: center;
    	flex-wrap:wrap;
		.out{
			padding: @p30 @p30;
    		width: 33.3%;
    		border-bottom: 1px solid #262934;
    		.red{
    			color: #ff335b;
    			font-size: @fsize;
    		}
    		.green{
    			color: #33ffc3;
    		}
    		p{
    			height: 0.5333rem;
    			line-height: 0.5333rem;
    			border-right: 1px solid #262934;
    			img{
    				width: 0.213rem;
    				height: 0.266rem;
    			}
    		}
    		
    		
    	}
    	.right{
    		p{
    			border-right: none;
    		}
    		
    	}
    	
	}
}
.seachList{
	padding: 0 @p30;
	height: auto;
	color: white;
	p{
		height: 1.2rem;
		width: 9.2rem;
		margin: 0 auto;
		display: flex;
		justify-content:space-between;
		align-items: center;
		font-size: @f34;
		
		img{
			width: 1.066rem;
			height: 1.066rem;
		}
	}
}

</style>